<template>
  <div class="drugAdvise-container">
    <div class="search-container">
      <div class="search-box">
        <input type="text" placeholder="输入商品名称" v-model="searchParam.name" @focus="searchShow=false"  @blur="searchShow=true">
        <i v-show="searchShow" class="iconfont icon-search"></i>
      </div>
      <div class="btn" @click="searchBotton">搜索</div>
    </div>
    <ul class="goods-list">
      <li v-for = "(item,index) in drugList" :key = "index"
        class="contentList"
        >
        <div class="content">{{item.name}}</div>
        <div class="shareBtn" @click="shareDrug(index)">
          <i class="iconfont icon-share"></i>
          分享
        </div>
      </li>
    </ul>
    <div class="more-box">
      <div v-if="isMore" class="more">上滑加载更多...</div>
      <div v-else class="more">没有更多数据</div>
    </div>
  </div>
</template>

<script>
import { getGoodsList, putShareInfo } from '@/api/dialog'
export default {
  created () {
    // 查询药品列表
    this.getDrugListSearch()
    var that = this
    setTimeout(function(){
      window.addEventListener('scroll', function () {
        if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight
          && that.isMore && that.canSearchMore) {
          that.canSearchMore = false
          that.loadMore()
          setTimeout(function() {
            that.canSearchMore = true
          },1000)
        }
      }, true);
    },500)

  },
  computed: {
    customParam () {
      let customParam = this.$store.state.drugShareParam
      return customParam
    },
    sessionId () {
      let sessionId = this.$route.query.sessionId
      return sessionId
    },
    sessionName () {
      return this.$route.query.sessionName
    }
  },
  data() {
    return {
      drugList: [],
      searchShow: true,
      searchParam: {
        name: '',
        pagenum: 1,
        pagesize: 20,
        // type: '-1'
      },
      // pulldown: true
      isMore: true,
      canSearchMore: true
    }
  },
  methods : {
    shareDrug (index) {
      let putDrugInfoId= this.drugList[index].goodId
      let putDrugInfoParam = {}
      let drugshare = JSON.parse(window.sessionStorage.getItem('drugShareParam'))
      putDrugInfoParam.fromId = drugshare.fromId
      putDrugInfoParam.fromImId = drugshare.fromImId
      putDrugInfoParam.toImId = drugshare.toImId
      putDrugInfoParam.to = drugshare.to
      // 点击分享按钮
      this.putDrugParam(putDrugInfoId, putDrugInfoParam)
    },
    getDrugList () {
      getGoodsList (this.searchParam).then ( res => {
        let moredata = res.data.data.rows
        if(moredata.length>0){
          this.drugList = this.drugList.concat(res.data.data.rows)
        }else{
          this.isMore = false
        }
      })
    },
    searchBotton() {
      this.searchParam.pagenum = 1
      this.getDrugListSearch()
    },
    getDrugListSearch () {
      getGoodsList (this.searchParam).then ( res => {
        this.drugList = res.data.data.rows
        // this.drugList = res.data.data.rows.concat(this.drugList)
      })
    },
    putDrugParam (id,data) {
      // 出现过滤效果
      putShareInfo (id,data).then ( () =>{
        // 数据上传成功，就跳转到聊天页面
        // query带参数，是为了判断后退是一步还是2不
        // this.$router.push({path:`/doctorChat/${this.sessionId}`, query:{sessionName:this.sessionName}})
        this.$router.push({path:`/doctorChat/${this.sessionId}`, query:{sessionName:this.sessionName}})
        // 结束过滤效果
      })
    },
    // 加载更多
    loadMore () {
      this.searchParam.pagenum++
      this.getDrugList()
    }
  }
}
</script>

<style scoped lang="stylus">
.drugAdvise-container
  // border: 1px solid red
  .search-container
    width: 100%
    box-sizing : border-box
    padding: 5px 10px
    display: flex
    text-align:center
    border-bottom: 1px solid #d5d5d5
    position: fixed
    top: 0
    left: 0
    background: #fff
    .search-box
      flex: 1
      position: relative
      input
        width: 100%
        background: #eee
        height: 30px
        line-height: 30px
        border-radius : 20px
        outline: none
        border: 1px solid #eee
        text-align: center
      .iconfont
        position: absolute
        line-height: 30px
        left: 28%
        top: 0
        font-size: 16px
        color: #777
    .btn
      width: 50px
      height: 30px
      line-height: 30px
      color: #99897c
  .goods-list
    margin-top: 40px
    border-top: 1px solid #d5d5d5
    .contentList
      // width: 100%
      display: flex
      padding: 10px
      line-height: 30px
      border-bottom: 1px solid #d5d5d5
      background: #fff
      box-sizing :border-box
      .content
        flex: 1
      .shareBtn
        background: #99897c
        margin: auto 0
        padding: 5px
        font-size: 14px
        color: #fff
        border-radius: 4px
        .iconfont
          margin-right: 1px
  .more-box
    font-size: 12px
    margin-top: 10px
    width: 100%
    text-align:center
    color: #666

</style>
